<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品问题反馈记录表（带筛选）</title>
    <style>
        body {
            font-family: '微软雅黑', sans-serif;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            background-color: #f5f5f5;
        }
        .header {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .description {
            color: #666;
            line-height: 1.6;
            margin: 15px 0 10px;
        }
        .filter-container {
            margin: 15px 0;
        }
        #typeFilter {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            margin-right: 10px;
            min-width: 200px;
        }
        .feedback-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .feedback-table th, .feedback-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }
        .feedback-table th {
            background-color: #3498db;
            color: white;
            font-weight: 500;
        }
        .feedback-table tr:hover {
            background-color: #f8f9fa;
            transition: background-color 0.2s;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            font-weight: bold;
        }
        .processing { background-color: #f1c40f; color: white; }
        .to-verify { background-color: #3498db; color: white; }
        .resolved { background-color: #2ecc71; color: white; }
        .pending { background-color: #e74c3c; color: white; }
        .closed { background-color: #95a5a6; color: white; }
    </style>
</head>
<body>
    <h1 class="header">产品问题反馈记录表</h1>
    <p class="description">本页面记录用户反馈的产品问题，支持按问题类型筛选（如筛选“硬件故障”仅显示对应类型问题）。</p>

    <!-- 筛选功能区域 -->
    <div class="filter-container">
        <label for="typeFilter">筛选问题类型：</label>
        <select id="typeFilter">
            <option value="all">全部类型</option>
            <option value="硬件故障">硬件故障</option>
            <option value="软件兼容性问题">软件兼容性问题</option>
            <option value="硬件质量问题">硬件质量问题</option>
            <option value="功能缺陷">功能缺陷</option>
            <option value="电池性能异常">电池性能异常</option>
        </select>
    </div>

    <table class="feedback-table">
        <thead>
            <tr>
                <th>问题编号</th>
                <th>问题描述</th>
                <th>问题类型</th>
                <th>问题发生时间</th>
                <th>设备型号</th>
                <th>处理状态</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            <tr>
                <td>HW-2025-001</td>
                <td>设备充电时发热严重（温度≥55℃），充电30分钟后自动断电，重启后恢复正常。</td>
                <td>硬件故障</td>
                <td>2025-10-05 14:30</td>
                <td>X1 Pro</td>
                <td><span class="status processing">处理中</span></td>
            </tr>
            <tr>
                <td>SW-2025-002</td>
                <td>APP“我的订单”页面加载卡顿（耗时超10秒），仅在5G网络下出现，4G网络正常。</td>
                <td>软件兼容性问题</td>
                <td>2025-10-06 09:15</td>
                <td>A3 Max</td>
                <td><span class="status to-verify">待验证</span></td>
            </tr>
            <tr>
                <td>HW-2025-003</td>
                <td>设备屏幕边缘出现黄斑（面积约2cm×3cm），未受外力碰撞，使用满6个月后出现。</td>
                <td>硬件质量问题</td>
                <td>2025-10-07 18:40</td>
                <td>X2 Lite</td>
                <td><span class="status resolved">已解决</span></td>
            </tr>
            <tr>
                <td>SW-2025-004</td>
                <td>语音助手无法识别方言（如四川话），指令“打开空调”识别为“打开电灯”。</td>
                <td>功能缺陷</td>
                <td>2025-10-08 12:00</td>
                <td>B5 Plus</td>
                <td><span class="status pending">待处理</span></td>
            </tr>
            <tr>
                <td>HW-2025-005</td>
                <td>设备电池续航缩短（满电仅支持2小时使用，标称6小时），充电频率增加至每日3次。</td>
                <td>电池性能异常</td>
                <td>2025-10-09 16:20</td>
                <td>X1 Pro</td>
                <td><span class="status closed">已关闭</span></td>
            </tr>
        </tbody>
    </table>

    <script>
        // 筛选功能实现
        document.addEventListener('DOMContentLoaded', function() {
            const typeFilter = document.getElementById('typeFilter');
            const tableBody = document.getElementById('tableBody');
            const rows = tableBody.getElementsByTagName('tr');

            // 监听筛选下拉框变化
            typeFilter.addEventListener('change', function() {
                const selectedType = this.value;
                
                // 遍历表格行，显示/隐藏匹配的行
                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i];
                    const typeCell = row.getElementsByTagName('td')[2]; // 第三列是问题类型
                    const rowType = typeCell.textContent.trim();

                    // 如果选择“全部”或类型匹配，则显示；否则隐藏
                    if (selectedType === 'all' || rowType === selectedType) {
                        row.style.display = 'table-row';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });
        });
    </script>
</body>
</html>